import React, {
  Component
} from 'react'
import {
  StyleSheet,
  View,
  Image,
  Button,
  Text,
  TouchableOpacity
} from 'react-native'
import NavigationBar from '../../components/common/NavigationBar'

class PhoneNumber extends Component {
  constructor(props) {
    super(props)

    // 初始状态
    this.state = {}
  }
  render() {
    return (
      <View style = {styles.container}>
        <NavigationBar
          title={'手机号'}
          statusBar={{backgroundColor: '#ffffff', barStyle: 'dark-content'}}
          navigator={this.props.navigator}
          style={{borderBottomWidth: 1, borderColor: '#EDEDED', backgroundColor: '#ffffff'}}
        />
        <View style={styles.body}>
          <View style={styles.textBody}>
            <Text style={styles.textTitle}>当前手机号</Text>
            <Text style={styles.number}>18257101874</Text>
            <Text style={styles.textDec}>更改手机号不影响您的房屋配置、场景、成员管理等设置，更改后，请用新的手机号码登录。</Text>
          </View>
          <TouchableOpacity onPress = {this._onButtonPress.bind(this)} >
            <View style={styles.button}>
              <Text style={styles.buttonText}>更换手机号</Text>
            </View>
          </TouchableOpacity>
        </View>
      </View>
    )
  }
  _onButtonPress() {

  }
}

export default PhoneNumber

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F4F4F4',
    flex: 1
  },
  body: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  textBody: {
    flexDirection: 'column',
    paddingTop: 30,
    paddingLeft: 20,
    paddingRight: 20,
  },
  textTitle: {
    color: '#666666',
    fontSize: 20,
  },
  number: {
    color: '#333333',
    fontSize: 32,
    fontWeight: 'bold',
    marginTop: 10,
    marginBottom: 20,
  },
  textDec: {
    color: '#666666',
    fontSize: 14,
  },
  button: {
    width: 200,
    height: 44,
    borderRadius: 22,
    backgroundColor: '#26B9CE',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 58
  },
  buttonText: {
    color: '#ffffff',
    fontSize: 14,
  },
})
